import React, { useEffect } from "react";
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import request from '@/utils/request'

echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);


function Home() {
    useEffect(async () => {

        // 获取文章列表
        const { data: { data: articleList } } = await request.get('/article')
        console.log(articleList);
        //获取标签列表
        const { data: { data: tagList } } = await request.get('/tag')
        console.log(tagList);
        var chartDom = document.getElementById('mychar');
        var myChart = echarts.init(chartDom);
        var option;
        const dataList = []

        tagList.forEach((item, index) => {
            let data = {};
            data.name = item.lable;
            data.value = 0;
            dataList.push(data)
        })
        articleList.forEach((item, index) => {
            tagList.forEach((itm, idx) => {
                if (item.tag.includes(itm.lable)) {
                    dataList[idx].value += 1;
                }

            })
        });
        console.log(dataList);
        option = {
            title: {
                text: '文章所属标签图示',
                subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '标签',
                    type: 'pie',
                    radius: '50%',
                    data: dataList,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }, [])

    return (
        <div >
            <div id='mychar' style={{ height: 600, width: 600 }}>

            </div>
        </div>
    )
}
export default Home